<template>
  <div>
    <!-- 顶部 -->
    <div class="top flex">
      <el-input v-model="data.keydown" placeholder="请输入内容" class="inp">
        <template #append>
          <el-button :icon="Search">搜索</el-button>
        </template>
      </el-input>
      <el-button type="primary" :icon="Edit" @click="$router.push('/feature/addand')">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="data.list" style="width: 100%">
      <el-table-column prop="name" label="标题" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column prop="status" label="状态" >
        <template v-slot="{row}">
         <el-tag class="ml-2" type="success" v-if="row.status">开启</el-tag>
                    <el-tag class="ml-2" type="info" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination small background layout="prev, pager, next" :total="data.total" class="mt-4" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, Edit } from '@element-plus/icons-vue'
import dayjs from 'dayjs';
import { baseURL } from '@/uitils/env'
import { getabout } from '@/api/about_api'
const data: any = reactive({
  keydown: '',
  list: [],
  page: 1,
  limit: 10,
  total: 0
})
onMounted(() => {
  getabout({ page: data.page, limit: data.limit }).then((res): any => {
    console.log(res);
    data.list = res.data.map((item: any) => {
      item.updatedAt = dayjs(item.updatedAt).format('YYYY-MM-DD hh:mm:ss')
      return item
    })
    data.total = res.total

  })
})
</script>
<style lang='scss' scoped>
.top {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .inp {
    width: 400px;
  }
}

.mt-4 {
  margin-top: 20px;
}

.img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>